<template>
  <a-card>
    <ContentHeader />
    <div class="table-action">
      <a-button v-if="auth('addApi')" @click="addApi">新增Api接口</a-button>
    </div>
    <a-alert
      message="此处管理本后台菜单所需的API接口，请谨慎修改"
      type="warning"
      banner
      show-icon
      closable
    />
    <a-table
      rowKey="merch_api_id"
      :columns="columns"
      :data-source="data"
      :pagination="false"
    >
      <template #action="value">
        <a v-if="auth('editApi')" @click="editApi(value.record)">编辑</a>
        <a-divider type="vertical" />
        <a v-if="auth('delApi')" @click="deletes(value.record)">删除</a>
      </template>
    </a-table>
    <addApiForm @okCallback="okCallback" ref="addApis" />
    <editApiForm @okCallback="okCallback" ref="editApis" />
  </a-card>
</template>
<script>
import { defineComponent, createVNode, reactive, toRefs } from "vue";
import { list,delApi } from "@/api/menu/merch/Api";
import { Modal } from "ant-design-vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { notice,auth } from "@/config";
import addApiForm from "./api/addApi";
import editApiForm from "./api/editApi";
export default defineComponent({
  components: {
    addApiForm,
    editApiForm,
  },
  setup() {
    const columns = [
      {
        key: "merch_api_id",
        title: "接口ID",
        dataIndex: "merch_api_id",
      },
      {
        key: "name",
        title: "接口名称",
        dataIndex: "name",
      },
      {
        key: "url",
        title: "接口路径",
        dataIndex: "url",
      },
      {
        title: "排序",
        dataIndex: "sort",
      },
      {
        key: "action",
        title: "操作",
        slots: {
          customRender: "action",
        },
      },
    ]

    // 定义动态数据
    const state = reactive({
      data: [],
      addApis: {},
      editApis: {},
    })

    // 获取数据
    const getTable = () => {
      list().then((res) => {
        state.data = res.data
      });
    };
    getTable()


    // 新增菜单
    const addApi = () => {
      state.addApis.show(state.data)
    }
    // 编辑菜单
    const editApi = (item) => {
      state.editApis.show(state.data, item);
    }
    

    // 删除菜单
    const deletes = (item) => {
      Modal.confirm({
        title: () =>
          "你真的要删除(名称:" +
          item.name +
          ",ID:" +
          item.merch_api_id +
          ")这条记录吗?",
        icon: () => createVNode(ExclamationCircleOutlined),
        content: () => "注意：确定删除后不可恢复",
        okText: () => "确定删除",
        okType: "danger",
        cancelText: () => "取消操作",
        onOk() {
          delApi({ merch_api_id: item.merch_api_id }).then((res) => {
            getTable()
            notice(res.status == 200 ? "success" : "error", res.message)
          });
        },
        onCancel() {},
      })
    }

    // 新增成功回调
    const okCallback = () => {
      getTable();
    }

    return {
      ...toRefs(state),
      columns,
      addApi,
      editApi,
      deletes,
      okCallback,
      auth,
    };
  },
});
</script>
<style scoped>
.popover-button {
  margin-right: 5px;
  padding: 0 5px;
  font-size: 12px;
}
</style>
